<template>
  <div v-if="notice.length > 0" class="notice">
    <mt-swipe :auto="3000" :show-indicators="false">
      <mt-swipe-item class="notice_item" v-for="(item, index) in notice" :key="index">
        <img src="../assets/images/notice.png" style="width: 0.34rem;height: 0.31rem;margin-right: 0.2rem;"/>
        <span>恭喜</span>
        <img :src="item.user.avatar"/>
        <p class="show_name">{{item.user.nickname}}</p>
        <span>抓到了</span>
        <img :src="item.ware_image"/>
        <p class="show_name">{{item.ware_name}}</p>
        <span>！{{item.sentence}}</span>
      </mt-swipe-item>
    </mt-swipe>
  </div>
</template>
<script>
  import api from "@/assets/js/api";
  export default {
    data: function() {
      return {
        notice: [],
      };
    },
    props: ["selected"],
    created: function() {
      api.fetch("/api/doll-records/latest").then(res => {
        this.notice = res.data;
      }).catch();
    },
    methods: {}
  };
</script>
<style lang="less" scoped>
  .notice {
    width:100%;
    height: 0.8rem;
    background-color: #ffffff;
    /*border-radius: 0.2rem;*/
    margin-top: 0.3rem;
    box-shadow: 0 0.06rem 0.04rem #f0f0f0;
  }

  .notice_item {
    padding: 0 0.22rem;
    text-align: left;
    line-height: 0.8rem;
    font-size: 0.22rem;
    color: #999999;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .show_name {
    display: inline-block;
    color:#ffb52b;
    max-width: 1.15rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: middle;
  }

  .notice span {
    vertical-align: middle;
  }

  .notice img {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 100%;
    vertical-align: middle;
    margin: 0 0.1rem;
  }
</style>
